<template>
  <div>
    <el-link class="movie-poster"
             @click="getIntroduce"
             :underline="false">
      <el-image
          :src="oldMovieInfo.poster"
          class="movie-poster-img"/>
      <div class="movie-overlay movie-overlay-bg to-flex">
        <sn-row-has-two-col :left="20" :right="4">
          <p class="movie-name" slot="one-col">{{ oldMovieInfo.movieName }}</p>
          <span
              v-if="oldMovieInfo.movieScore > 0"
              slot="two-col" class="movie-score vip">{{ Number(oldMovieInfo.movieScore).toFixed(1) }}</span>
        </sn-row-has-two-col>
      </div>
    </el-link>
  </div>
</template>

<script>
export default {
  name: "HotShowingMovieInfo",
  data() {
    return {}
  },
  props: {
    oldMovieInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    //到简介页面
    getIntroduce() {
      this.$store.commit(this.mutationsTypes.EXCHANGE_MOVIE_ID, this.oldMovieInfo.movieId)
      this.$router.push({
        name: 'introduce',
      })
    },
  },
}
</script>

<style scoped>
.el-button {
  width: 160px;
  border-radius: 0;
}

.movie-poster {
  background-color: #fcfcfc;
  width: 160px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.movie-poster-img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.movie-overlay {
  background-color: #fcfcfc;
  width: 160px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.movie-overlay-bg {
  background: url() repeat-x bottom;
}

.movie-score {
  position: absolute;
  bottom: 12px;
  left: 130px;
  font-size: 18px;
}

.movie-name {
  position: absolute;
  bottom: 0;
  color: #fff;
  width: 120px;
  margin-left: 5px;
  font-size: 15px;
}

</style>
